<!DOCTYPE html>
<html style="width: 100%;height: 100%;margin: 0;padding: 0">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <title>上传身份证</title>
    <style>
        #progress{
            height:10px;
            width:200px;
            border: 1px solid gold;
            position: relative;
            border-radius: 5px;
        }
        #progress .progress-item{
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: chartreuse;
            border-radius: 5px;
            transition: width .3s linear;
        }
         #img{
            height:200px;
            width:200px;
        }
    </style>
    <script language="javascript">

    </script>

</head>
<body style="width: 100%;height: 100%;margin: 0;padding: 0">
<div class="sctp">
    <input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera"/><br>
    <img src="" id="img"/><br>
    显示进度条<br>
    <div id="progress">
        <div class="progress-item"></div>
    </div>
    上传成功后的返回内容<br>
    <span id="callback"></span>
</div>
<script type="text/javascript">
   var upload = function(c, d){
    "use strict";
    var $c = document.querySelector(c),
        $d = document.querySelector(d),
        file2 = $c.files[0],
        reader = new FileReader();
    reader.readAsDataURL(file2);
    reader.onload = function(e){
        $d.setAttribute("src", e.target.result);
         alert("上传中")
        //获取到选中的文件
        //创建formdata对象
        var formdata = new FormData();
        formdata.append("fileBtn",file2);
        formdata.append('token', "a1b69334150ba030093c84f7bd0a666e&order");
        //创建xhr，使用ajax进行文件上传
        var xhr = new XMLHttpRequest();
        xhr.open("post","http://appadviser.hejuzg.cn/broker/version1/brokerAttachment/uploadimage");
        //回调
        xhr.onreadystatechange = function () {
            if (xhr.readyState==4 && xhr.status==200){
            alert("上传成功")
                document.querySelector("#callback").innerText = xhr.responseText;
            }
        }
        //获取上传的进度
        xhr.upload.onprogress = function (event) {
            if(event.lengthComputable){
                var percent = event.loaded/event.total *100;
                document.querySelector("#progress .progress-item").style.width = percent+"%";
            }
        }
        //将formdata上传
        xhr.send(formdata);
    };

};

</script>
</body>
</html>
